import { searchTreeOrganization } from '@/services/api/api-cues-submit';
import { getCuesTopicDetails } from '@/services/api/api-cues-topic';
import ProCard from '@ant-design/pro-card';
import { PageContainer } from '@ant-design/pro-layout';
import { Button, Descriptions, Divider, Space, Tag } from 'antd';
import { DefaultOptionType } from 'antd/lib/select';
import React, { useEffect, useState } from 'react';
import { useAccess, useModel } from 'umi';
import DetailsTopicEdit from './DetailsTopicEdit';
import DetailsTopicShareAccount from './DetailsTopicShareAccount';
import TableTopicPlan from './TableTopicPlan';

interface DetailsTopicProps {
  id: string | undefined;
  name: string | undefined;
  onBack: () => void;
}

const DetailsTopic: React.FC<DetailsTopicProps> = (props) => {
  const { id, name, onBack } = props;
  const access = useAccess();
  const { initialState, setInitialState } = useModel('@@initialState');

  const [topicDetails, setTopicDetailsState] = useState<CuesTopicData.TopicDetails>();

  /**
   * 获取 详情
   * @param key
   */
  const getTopicDetails = async () => {
    try {
      const response = await getCuesTopicDetails({ id });
      if (response.code === 0) {
        setTopicDetailsState(response.data);
      }
    } catch (error) { }
  };

  /**
   * 获取 详情
   */
  useEffect(() => {
    getTopicDetails();
  }, []);

  const [articleOrganizations, setArticleOrganizationState] = useState<any[]>([]);

  /**
   * 加载 组织 列表
   * @param key
   */
  const treeOrganizationData = async () => {
    try {
      const response = await searchTreeOrganization();
      if (response.code === 0) {
        setArticleOrganizationState(response.data);
      }
    } catch (error) { }
  };

  useEffect(() => {
    if (access.线索上报x选题计划x选题列表x收录线索) {
      treeOrganizationData();
    }
  }, []);

  const filter = (inputValue: string, path: DefaultOptionType[]) =>
    path.some(
      (option) => (option.label as string).toLowerCase().indexOf(inputValue.toLowerCase()) > -1,
    );

  return (
    <PageContainer
      header={{
        title: (
          <div
            style={{
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
            }}
          >
            {topicDetails != undefined && (
              <Tag
                color={
                  topicDetails?.run === 1 ? 'green' : topicDetails?.run === 2 ? 'red' : 'orange'
                }
              >
                {topicDetails?.run === 1 ? '进行中' : topicDetails?.run === 2 ? '已结束' : '已暂停'}
              </Tag>
            )}
            <a>{name}</a>
          </div>
        ),
        breadcrumb: {
          items: [],
        },
        extra: [
          (access.线索上报x选题计划x配置x管理员 || topicDetails?.isCreatedAccount === 1) &&
          topicDetails != undefined && (
            <DetailsTopicShareAccount
              key="details_topic_share_account_drawer_form"
              topicId={id}
              shareAccounts={topicDetails?.shareAccounts?.map((item) => item.id)}
              onRefurbish={() => {
                getTopicDetails();
              }}
            />
          ),
          (access.线索上报x选题计划x配置x管理员 || topicDetails?.isCreatedAccount === 1) &&
          access.线索上报x选题计划x计划列表x更新计划 &&
          topicDetails != undefined && (
            <DetailsTopicEdit
              key="details_topic_edit_drawer_form"
              topicId={id}
              createdTime={topicDetails?.createdTime}
              deadline={topicDetails?.deadline}
              run={topicDetails?.run}
              onRefurbish={() => {
                getTopicDetails();
              }}
            />
          ),
        ],
      }}
      onBack={() => onBack()}
    >
      <ProCard>
        <Descriptions size="small">
          <Descriptions.Item label="创建时间">{topicDetails?.createdTime}</Descriptions.Item>
          <Descriptions.Item label="截止时间">{topicDetails?.deadline}</Descriptions.Item>
          <Descriptions.Item label="创建单位">
            {topicDetails?.createdOrganizationName}
          </Descriptions.Item>
          <Descriptions.Item label="创建人">{topicDetails?.createdAccountName}</Descriptions.Item>
          <Descriptions.Item label="联系方式">
            {topicDetails?.createdAccountPhone}
          </Descriptions.Item>
        </Descriptions>
        {(access.线索上报x选题计划x配置x管理员 || topicDetails?.isCreatedAccount === 1) && (
          <>
            <Divider />
            <ProCard
              title="指派报送单位"
              ghost
              collapsible
              defaultCollapsed
              onCollapse={(collapse) => console.log(collapse)}
              style={{lineHeight:2}}
            >
              {topicDetails?.assignOrganizations?.map((item) => (
                <Tag>{item.name}</Tag>
              ))}
            </ProCard>
            {/* <Descriptions layout="vertical" size="small">
              <Descriptions.Item span={4}>
                <Space wrap>
                  {topicDetails?.assignOrganizations?.map((item) => (
                    <Tag>{item.name}</Tag>
                  ))}
                </Space>
              </Descriptions.Item>
            </Descriptions> */}
            <Divider />
            <Descriptions layout="vertical" size="small">
              <Descriptions.Item label="指派阅读、录用记者" span={4}>
                {topicDetails?.isShare == 1 ? (
                  <Space wrap>
                    {topicDetails?.shareAccounts?.map((item) => (
                      <Tag>{item.name}</Tag>
                    ))}
                  </Space>
                ) : (
                  '自己'
                )}
              </Descriptions.Item>
            </Descriptions>
          </>
        )}
      </ProCard>
      {topicDetails?.plans?.map((item) => {
        return <TableTopicPlan key="table_topic_plan" run={topicDetails?.run} plan={item} length={topicDetails?.plans.length} />;
      })}
    </PageContainer>
  );
};

export default DetailsTopic;
